{% extends 'base.html' %}
{% load static %}

{% block title %}{{ category.name }} - 工具分类 - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.category-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 3rem 0;
    margin-bottom: 2rem;
    border-radius: 0 0 20px 20px;
}

.category-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.tool-card {
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.1);
    border-color: var(--primary-color);
}

.tool-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.tool-type-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    background: var(--primary-color);
    color: var(--bg-color);
}

.tool-stats {
    font-size: 0.875rem;
    color: var(--text-muted);
}
</style>
{% endblock %}

{% block content %}
<!-- 分类头部 -->
<div class="category-header">
    <div class="container">
        <div class="text-center">
            <div class="category-icon">
                <i class="{{ category.icon }}"></i>
            </div>
            <h1 class="display-4 mb-3">{{ category.name }}</h1>
            {% if category.description %}
            <p class="lead">{{ category.description }}</p>
            {% endif %}
            <p class="mb-0">共 {{ page_obj.paginator.count }} 个工具</p>
        </div>
    </div>
</div>

<div class="container">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'home' %}">首页</a></li>
            <li class="breadcrumb-item"><a href="{% url 'tools:tool_list' %}">工具分享</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ category.name }}</li>
        </ol>
    </nav>

    <!-- 工具列表 -->
    <div class="row">
        {% for tool in page_obj %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="tool-card">
                <div class="card-body text-center">
                    <div class="tool-icon">
                        <i class="{{ tool.icon }}"></i>
                    </div>
                    <h5 class="card-title">{{ tool.name }}</h5>
                    <p class="card-text text-muted">{{ tool.description|truncatechars:80 }}</p>
                    
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="tool-type-badge">{{ tool.get_tool_type_display }}</span>
                        {% if tool.is_free %}
                        <span class="badge bg-success">免费</span>
                        {% else %}
                        <span class="badge bg-warning">付费</span>
                        {% endif %}
                    </div>

                    <div class="tool-stats mb-3">
                        <small>
                            <i class="fas fa-eye"></i> {{ tool.views }}
                            <i class="fas fa-mouse-pointer ms-2"></i> {{ tool.clicks }}
                            <i class="fas fa-star ms-2"></i> {{ tool.rating }}
                        </small>
                    </div>

                    <div class="d-grid gap-2">
                        <a href="{{ tool.get_absolute_url }}" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-info-circle"></i> 查看详情
                        </a>
                        <a href="{{ tool.url }}" target="_blank" class="btn btn-primary btn-sm"
                           onclick="trackClick('{{ tool.slug }}')">
                            <i class="fas fa-external-link-alt"></i> 访问工具
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="text-center py-5">
                <i class="fas fa-tools fa-3x text-muted mb-3"></i>
                <h4>该分类下暂无工具</h4>
                <p class="text-muted">请浏览其他分类或稍后再来查看</p>
                <a href="{% url 'tools:tool_list' %}" class="btn btn-primary">
                    <i class="fas fa-arrow-left"></i> 返回工具列表
                </a>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 分页 -->
    {% if page_obj.has_other_pages %}
    <nav aria-label="工具分页" class="mt-4">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </li>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
            <li class="page-item active">
                <span class="page-link">{{ num }}</span>
            </li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <li class="page-item">
                <a class="page-link" href="?page={{ num }}">{{ num }}</a>
            </li>
            {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}">
                    <i class="fas fa-chevron-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
function trackClick(slug) {
    fetch(`/tools/click/${slug}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
    });
}
</script>
{% endblock %}